<template>
  <!-- 原因分析:发生根本原因表单弹窗 -->
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    :title="props.title"
    width="70%"
    :draggable="false"
    @close="closeDialog"
  >
    <!-- <el-form ref="formRef" :model="formData" :rules="rules" label-width="160">
      <div style="margin-top: 20px">
        <CommonUploadFile
          :isRead="props.isReadonly"
          :files="formData.assetPhotos"
          @update-files="updateFormFiles"
        />
      </div>
    </el-form> -->

    <el-form ref="formRef" :model="formData" :rules="rules" label-width="160">
      <div
        v-for="(attachments, index) in formData.assetPhotos"
        :key="index"
        style="margin-top: 20px"
      >
        <h3>
          业务类型：
          {{ useDictionary("ExceptionBusType", attachments[0].businessType) }}
        </h3>

        <CommonUploadFile
          :isRead="props.isReadonly"
          :files="attachments"
          @update-files="updateFormFiles(attachments, index)"
        />
        <div class="attachment-list">
          <el-row>
            <el-col
              v-for="(file, fileIndex) in attachments"
              :key="fileIndex"
              :span="6"
            />
          </el-row>
        </div>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
import { useTable, useDownload, useDictionary } from "@/utils/useTable";
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "QMSQ8DD42ADDORUPDATEE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
    console.log("11111", props.data);
    formData.assetPhotos = props.data;
  }
);
onMounted(() => {
  console.log("11111", props.id);
  //getD42();
});
const rules = reactive({
  qualityExceptionId: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  qualityExceptionCode: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  exceptionContent: [
    { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
  ],
  version: [],
  remarks: [
    { min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur" },
  ],
  createTime: [],
  createdUserId: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  createdUserName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  lastUpdateTime: [],
  lastUpdatedUserId: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  lastUpdatedUserName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  enabled: [],
  deleted: [],
});

const formRef = ref(ElForm);
let formData = reactive({
  id: "",
  qualityExceptionId: "",
  qualityExceptionCode: "",
  exceptionContent: "",
  version: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
  assetPhotos: props.data,
  isSubmit: 0,
  workOrderId: "",
  details: [
    {
      id: "",
      qualityExceptionId: "",
      qualityExceptionCode: "",
      exceptionContent: "",
      version: "",
      remarks: "",
      createdUserName: "",
      lastUpdatedUserName: "",
      enabled: "",
      deleted: "",
    },
  ],
});
watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        id,
        qualityExceptionId,
        qualityExceptionCode,
        exceptionContent,
        version,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        enabled,
        deleted,
        assetPhotos,
      } = newVal;
      Object.assign(formData, {
        id,
        qualityExceptionId,
        qualityExceptionCode,
        exceptionContent,
        version,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        enabled,
        deleted,
        assetPhotos: assetPhotos ?? [],
      });
      formData.assetPhotos = props.data;
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}
const details = {
  id: "",
  qualityExceptionId: "",
  qualityExceptionCode: "",
  exceptionContent: "",
  version: "",
  remarks: "",
  createdUserName: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
};
/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.qualityExceptionId = "";
  formData.qualityExceptionCode = "";
  formData.details = [JSON.parse(JSON.stringify(details))];
  formData.exceptionContent = "";
  formData.version = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.enabled = "";
  formData.deleted = "";
  formData.assetPhotos = [];
  formData.isSubmit = 0;
  formData.workOrderId = "";
}

const loading = ref(false);
// 图片处理
function updateFormFiles(val: []) {
  formData.assetPhotos = val;
}
const getD42 = async () => {
  await request({
    url: "/qms/q8dattachment/getList",
    method: "post",
    data: {},
  })
    .then((res) => {
      if (res.data != null) {
        Object.assign(formData.assetPhotos, res.data);
        loading1.value = true;
      } else {
        formData.id = "";
        loading1.value = true;
      }
    })
    .finally(() => {
      loading1.value = true;
    });
  console.log(formData.assetPhotos);
  console.log(loading1.value);
  console.log(props.id);
};

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
</script>
